<!-- 模块说明 -->
<script lang="ts" setup>
// @ts-ignore
import { useRouter } from "vue-router";
const router=useRouter()
// @ts-ignore
import { useCustomersStore } from "./../../store";
const customerstore = useCustomersStore()

const status = localStorage.getItem('pinia-customer');
const exit =()=>{
localStorage.removeItem('pinia-customer')
setTimeout(() => {
      router.push("/login?")
    }, 200)
}
</script>

<template>
  <div class="wode">
    <div class="top">
      <van-image v-if="status" width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
      <van-image v-else width="100" height="100" src="https://bpic.588ku.com/element_origin_min_pic/19/04/09/d5338875ce7f5f922beb421b2ee39f03.jpg" />
      <van-button v-if="status" type="default" @click="exit()">退出</van-button>
    </div>
    <div class="main">
      <div class="br"></div>
      <div style="height:60px;line-height: 60px;">
        <span v-if="status" >账号：{{customerstore.userid}}</span>
        <span v-else class="dl"><router-link to="/login">未登录,点我登陆</router-link></span>
      </div>
      
      <div class="br"></div>
      <div>
        <router-link to="/addrlist">
          <p>我的地址</p>
        </router-link>
      </div>
      
      <div class="br"></div>
      <div>
        <router-link to="/myorder">
          <p>我的订单</p>
        </router-link>
      </div>
      <div class="br"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .van-image{
    margin-bottom: 20px;
  }
}
.wode{
  .main{
    margin-top: 20px;
    flex:1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items:start;
  }
}
.br{
  width: 100%;
  border-bottom: 1px solid #000;
}
p {
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: black;
}

p:hover {
  color: red;
}
.dl{
  a{
    display: inline-block;
    color:rgb(5, 36, 139);
  }
 
}
</style>